<!-- Ana Luisa Figón Treviño -->
<html>
	<head>
		<meta charset='utf-8'>
		<title>Cat Walk</title>
	</head>
	<body>
		<img id='image' style='position:absolute;' src="http://38.media.tumblr.com/tumblr_lvrse6hwVT1r0l7aso1_r1_500.gif">
		<script type="text/javascript">

			var image = document.getElementById('image');
			image.style.left = '0px';
			image.style.top = '0px';
			var walk = true;
			var up = true;
			var u = false;
			var w = true;
			var cont = 0;
			var cont1 = 0;

			function catWalk(){
				var currentLeft = parseInt(image.style.left);
				var currentup = parseInt(image.style.top);

				if (u){
  					if (up && (currentup > (window.innerHeight-image.height))){
    					up = false;
  					}
  					if (!up && (currentup <= 0)) {
    					up = true;
    					cont1 ++;
    					if (cont1 == 3){
    						cont = 0;
    						u = false;
    						w = true;
    					}
  					}

					if (up) {
    					image.style.top = (currentup + 10) + 'px';
  					} else {
    					image.style.top = (currentup - 10) + 'px';
  					}
  				}

  				if (w) 
  				{  					
  					if (walk && (currentLeft > (window.innerWidth-image.width))) {
    					walk = false;
  					}
  					if (!walk && (currentLeft <= 0)) {
    					walk = true;
    					cont ++;
    					if (cont == 3){
    						u = true;
    						w = false;
    						cont1 = 0;
    					}
  					}
  
  					if (walk) {
    					image.style.left = (currentLeft + 10) + 'px';
  					} else {
    					image.style.left = (currentLeft - 10) + 'px';
  					}
  				} 			
			}

			window.setInterval(catWalk, 50);
		</script>
	</body>
</html>
